<template>
    <div class="hot-show-items">
        <div 
            class="hot-s-item"
            v-for='item,index in itemList'
            :key = 'item.id+index'
            @click="gotoPage(item.id)">
            <div class="item-l">
                <img :src="item.img" alt="">
            </div>
            <div class="item-r">
                <div class="item-info">
                    <div class="title">
                        <div class="over-text">{{item.nm}} </div>
                        <div v-if="item.version == 'v2d imax'"><img src="@/assets/img/v2dimax.png" alt=""></div>
                        <div v-if="item.version == 'v3d imax'"><img src="@/assets/img/v3dimax.png" alt=""></div>
                    </div>
                    <div class="point over-text" v-if='item.globalReleased && item.sc > 0.001'>观众评 <span>{{item.sc}}</span></div>
                    <div class="point over-text" v-if='item.globalReleased && item.sc <= 0.001'>暂无评分</div>
                    <div class="point over-text" v-if='!item.globalReleased'><span>{{item.wish}}</span> 人想看</div>
                    <div class="actor over-text" v-if='item.star != undefined && item.star.length > 0'>主演：{{item.star}}</div>
                    <div class="movieNum over-text" v-if='item.showInfo != undefined && item.showInfo.length > 0'>{{item.showInfo}}</div>
                </div>
                <div 
                    class="item-btn"
                    :style="{   'background': buttonColor(item),
                                'box-shadow':'0 0.04rem 0.04rem 0 ' + shadowColor(item)}">
                    <span>{{buttonContent(item)}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'hotShowItem',
    props: {
        itemList: Array,
    },
    methods: {
        gotoPage(url) {
            this.$router.push('/movie_detail/'+url+'/required')
        },
        buttonColor(item) {
            if(item.showStateButton == undefined){
                return '#FAAF00';
            }
            return item.showStateButton.color;
        },
        shadowColor(item) {
            if(item.showStateButton == undefined){
                return '#ccc';
            }
            return item.showStateButton.shadowColor;
        },
        buttonContent(item) {
            if(item.showStateButton == undefined){
                return '想看';
            }
            return item.showStateButton.content;
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.hot-s-item {
    padding: 0 10px;
    height: 110px;
    display: flex;
    &:last-child {
        padding-bottom: 0;
        margin-bottom: -1px;
    }
}
.item-l {
    height: 110px;
    padding-top: 8px;
    box-sizing: border-box;
    img {
        vertical-align: middle;
        width: 70px;
        height: 94px;
    }
}
.item-r {
    padding-left: 6px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    border-bottom: 1px solid #ddd;
    color: #666;
    .title {
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 8px;
        color: black;
        position: relative;
        display: flex;
        img {
            width: 54px;
        }
    }
    .point {
        span {
            color: $fontColor2;
            font-weight: bold;
        }
    }
    .item-btn {
        text-align: center;
        height: 30px;
        line-height: 30px;
        width: 60px;
        border-radius: 30px;
        color: #fff;
    }
}
.item-info {
    width: 220px;
    .over-text {
        /*这里要显示的设置宽度*/
        overflow:hidden;
        white-space:nowrap;
        /*文字超出宽度则显示ellipsis省略号*/
        text-overflow:ellipsis;
        width: 100%;
    }
    .title {
        .over-text {
            width: 166px;
        }
    }
}
</style>